<template>
  <div class="container">
    <header>
      <div class="logo">
        <i class="fas fa-heartbeat"></i>
        <h1>智能手环健康分析</h1>
      </div>
    </header>

    <div class="dashboard">
      <div class="summary-card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-heart" style="color: var(--danger);"></i>
            心率
          </div>
          <div class="card-trend trend-down">
            <i class="fas fa-arrow-down"></i> 5%
          </div>
        </div>
        <div class="card-value">72 bpm</div>
        <div>正常范围: 60-100 bpm</div>
      </div>

      <div class="summary-card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-fire" style="color: var(--warning);"></i>
            卡路里
          </div>
          <div class="card-trend trend-up">
            <i class="fas fa-arrow-up"></i> 12%
          </div>
        </div>
        <div class="card-value">1,850 kcal</div>
        <div>目标: 2,000 kcal</div>
      </div>

      <div class="summary-card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-bed" style="color: var(--secondary);"></i>
            睡眠质量
          </div>
          <div class="card-trend trend-up">
            <i class="fas fa-arrow-up"></i> 8%
          </div>
        </div>
        <div class="card-value">7.2 小时</div>
        <div>深睡: 2.1小时 (29%)</div>
      </div>
    </div>

    <div class="charts-container">
      <div class="chart-card">
        <div class="chart-header">
          <div class="chart-title">心率变化趋势 (24小时)</div>
        </div>
        <div class="chart-wrapper">
          <div id="heartRateChart"></div>
        </div>
      </div>

      <div class="chart-card">
        <div class="chart-header">
          <div class="chart-title">卡路里消耗 (本周)</div>
        </div>
        <div class="chart-wrapper">
          <div id="caloriesChart"></div>
        </div>
      </div>

      <div class="chart-card">
        <div class="chart-header">
          <div class="chart-title">睡眠质量分析</div>
        </div>
        <div class="chart-wrapper">
          <canvas id="sleepChart"></canvas>
        </div>
      </div>
    </div>

    <div class="stats-container">
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">步数</div>
          <i class="fas fa-walking" style="color: var(--primary);"></i>
        </div>
        <div class="stat-value">8,542</div>
        <div class="progress-bar">
          <div class="progress" style="width: 85%; background: var(--primary);"></div>
        </div>
        <div class="progress-info">
          <span>今日目标: 10,000步</span>
          <span>85%</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">距离</div>
          <i class="fas fa-route" style="color: var(--success);"></i>
        </div>
        <div class="stat-value">6.3 km</div>
        <div class="progress-bar">
          <div class="progress" style="width: 63%; background: var(--success);"></div>
        </div>
        <div class="progress-info">
          <span>今日目标: 10km</span>
          <span>63%</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">活动时间</div>
          <i class="far fa-clock" style="color: var(--warning);"></i>
        </div>
        <div class="stat-value">45 分钟</div>
        <div class="progress-bar">
          <div class="progress" style="width: 75%; background: var(--warning);"></div>
        </div>
        <div class="progress-info">
          <span>今日目标: 60分钟</span>
          <span>75%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'AnalysisIndex',
  components: {

  },
  data() {
    return {
      heartEchartsInstance: null,
      caloriesEChartsInstance: null,
      sleepEChartsInstance: null,
    }
  },
  mounted () {
    // 初始化心率图表
    const heartRateCtx = document.getElementById('heartRateChart');
    this.heartEchartsInstance = this.$echarts.init(heartRateCtx);
    this.heartEchartsInstance.setOption(this.getHeartRateOption());

    // 初始化卡路里图表
    const caloriesCtx = document.getElementById('caloriesChart');
    this.caloriesEChartsInstance = this.$echarts.init(caloriesCtx);
    this.caloriesEChartsInstance.setOption(this.getCalorieOption());

    // 初始化睡眠图表
    const sleepCtx = document.getElementById('sleepChart');
    this.sleepEChartsInstance = this.$echarts.init(sleepCtx);
    this.sleepEChartsInstance.setOption(this.getSleepOption());

  },
  methods: {
    getHeartRateOption() {
      // 模拟心率数据
      const hours = [];
      for (let i = 0; i < 24; i++) {
        hours.push(`${i}:00`);
      }

      const heartRates = [];
      for (let i = 0; i < 24; i++) {
        // 模拟一天中的心率变化
        let rate;
        if (i >= 0 && i < 6) {
          // 睡眠时间心率较低
          rate = 58 + Math.random() * 5;
        } else if (i >= 6 && i < 8) {
          // 早晨醒来心率升高
          rate = 70 + Math.random() * 10;
        } else if (i >= 8 && i < 12) {
          // 上午活动心率
          rate = 75 + Math.random() * 10;
        } else if (i >= 12 && i < 14) {
          // 午餐后心率略降
          rate = 70 + Math.random() * 5;
        } else if (i >= 14 && i < 18) {
          // 下午活动心率
          rate = 80 + Math.random() * 15;
        } else if (i >= 18 && i < 22) {
          // 晚间放松心率
          rate = 70 + Math.random() * 10;
        } else {
          // 睡前心率下降
          rate = 65 + Math.random() * 5;
        }
        heartRates.push(Math.round(rate));
      }

      return {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(29, 53, 87, 0.9)',
          borderColor: '#1d3557',
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#e63946',
              width: 2
            }
          },
          formatter: function(params) {
            const time = params[0].name;
            const value = params[0].value;
            return `<strong>${time}</strong><br>心率: ${value} bpm`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: hours,
          axisLine: {
            lineStyle: {
              color: '#457b9d'
            }
          },
          axisLabel: {
            color: '#1d3557',
            interval: 3,
            rotate: 45
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(69, 123, 157, 0.1)'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '心率 (bpm)',
          nameTextStyle: {
            color: '#1d3557',
            padding: [0, 0, 0, -40]
          },
          min: 50,
          max: 120,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#457b9d'
            }
          },
          axisLabel: {
            formatter: '{value}',
            color: '#1d3557'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(69, 123, 157, 0.1)'
            }
          }
        },
        series: [{
          name: '心率',
          type: 'line',
          data: heartRates,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            width: 4,
            color: '#e63946'
          },
          itemStyle: {
            color: '#fff',
            borderWidth: 2,
            borderColor: '#e63946'
          },
          areaStyle: {
            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: 'rgba(230, 57, 70, 0.3)'},
              {offset: 1, color: 'rgba(230, 57, 70, 0.05)'}
            ])
          },
          markLine: {
            silent: true,
            data: [
              {
                name: '正常上限',
                yAxis: 100,
                lineStyle: {
                  color: '#e9c46a',
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  position: 'end',
                  formatter: '正常上限: 100 bpm',
                  color: '#e9c46a'
                }
              },
              {
                name: '正常下限',
                yAxis: 60,
                lineStyle: {
                  color: '#e9c46a',
                  width: 2,
                  type: 'dashed'
                },
                label: {
                  position: 'end',
                  formatter: '正常下限: 60 bpm',
                  color: '#e9c46a'
                }
              }
            ]
          }
        }],
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 50
        }]
      };
    },
    getCalorieOption() {
      // 模拟卡路里数据
      const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      const calories = [1650, 1820, 1740, 2100, 1950, 2300, 1850];

      return {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(29, 53, 87, 0.9)',
          borderColor: '#1d3557',
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const day = params[0].name;
            const value = params[0].value;
            return `<strong>${day}</strong><br>卡路里消耗: ${value} kcal`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: days,
          axisLine: {
            lineStyle: {
              color: '#457b9d'
            }
          },
          axisLabel: {
            color: '#1d3557'
          }
        },
        yAxis: {
          type: 'value',
          name: '卡路里 (kcal)',
          nameTextStyle: {
            color: '#1d3557',
            padding: [0, 0, 0, -40]
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#457b9d'
            }
          },
          axisLabel: {
            formatter: '{value}',
            color: '#1d3557'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(69, 123, 157, 0.1)'
            }
          }
        },
        series: [{
          name: '卡路里',
          type: 'bar',
          data: calories,
          itemStyle: {
            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: '#ff9d00'},
              {offset: 1, color: '#ff6b00'}
            ]),
            borderRadius: [6, 6, 0, 0]
          },
          barWidth: '40%',
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(255, 152, 0, 0.5)'
            }
          }
        }]
      };
    },
    getSleepOption() {
      return {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(29, 53, 87, 0.9)',
          borderColor: '#1d3557',
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
          formatter: '{a} <br/>{b}: {c}小时 ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: 'bottom',
          data: ['深睡', '浅睡', 'REM睡眠', '清醒时间'],
          textStyle: {
            color: '#1d3557'
          }
        },
        series: [
          {
            name: '睡眠分析',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 2.1, name: '深睡', itemStyle: {color: '#1d3557'}},
              {value: 3.8, name: '浅睡', itemStyle: {color: '#457b9d'}},
              {value: 0.9, name: 'REM睡眠', itemStyle: {color: '#a8dadc'}},
              {value: 0.4, name: '清醒时间', itemStyle: {color: '#f1faee'}}
            ]
          }
        ]
      };
    },
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
  --primary: #00b4d8;
  --secondary: #0077b6;
  --accent: #90e0ef;
  --background: #f0f8ff;
  --card-bg: #ffffff;
  --text: #333333;
  --text-light: #666666;
  --success: #4caf50;
  --warning: #ff9800;
  --danger: #f44336;
}

body {
  background-color: var(--background);
  color: var(--text);
  min-height: 100vh;
}

.container {
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo i {
  font-size: 28px;
  color: var(--primary);
}

.logo h1 {
  font-size: 22px;
  font-weight: 600;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.date-display {
  color: var(--text-light);
  font-size: 14px;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.summary-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.summary-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title i {
  font-size: 18px;
}

.card-value {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--secondary);
}

.card-trend {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.trend-up {
  color: var(--success);
}

.trend-down {
  color: var(--danger);
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.chart-header {
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary);
}

.chart-wrapper {
  //height: 250px;
  //position: relative;

  position: relative;
  width: 100%;
  padding-bottom: 120%; /* 高度为宽度的120% */
  height: 0;
}

.chart-wrapper > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.stat-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-light);
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 10px;
}

.progress-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress {
  height: 100%;
  border-radius: 4px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-light);
}

footer {
  text-align: center;
  padding: 20px;
  color: var(--text-light);
  font-size: 14px;
  margin-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .dashboard, .charts-container, .stats-container {
    grid-template-columns: 1fr;
  }

  header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .user-info {
    justify-content: center;
  }
}

</style>
